<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
 <#include "/header.ftl">
    <style scope>
        .stutab {
            width: 500px;
            border-width: 2px;
            border-spacing: 0;
            border-color: lightgray;
            margin-left: 50px;

        }

        .stutab tr {
            height: 60px;
            text-align: center;
        }

        .divfather {
            text-align: center;
            width: 600px;
            height: 480px;
            border-style: solid;
            margin: 100px auto 10px;
        }

        .div_s {
            width: 600px;
            text-align: center;
            margin: 0 auto;
        }

        .bgimg {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">

    <div>
        <div class="bgimg" id="allPage">
            <div class="divfather">
                <br>
                <h1 class="headtop">准考证</h1>
                <br>


                <table class="stutab" border="1px">
                    <tr>
                        <td>学号</td>
                        <td>{{student.studentId}}</td>
                        <td width="150px" rowspan="4">
                            <img :src="student.studentPhoto" width="150px" height="232px"/>
                        </td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>{{student.studentName}}</td>

                    </tr>
                    <tr>
                        <td>性别</td>
                        <td>{{student.studentSex}}</td>

                    </tr>
                    <tr>
                        <td>考试科目</td>
                        <td>
                            <span v-for="exam in student.exams">{{exam.course.courseName}}   </span>
                        </td>
                    </tr>
                    <tr>
                        <td>考试地点</td>
                        <td colspan="2">
                            <span v-for="exam in student.exams">{{exam.course.courseName}}：{{exam.examPlace}} <br>  </span>
                        </td>
                    </tr>
                    <tr>
                        <td>考试时间</td>
                        <td colspan="2">
                            <span v-for="exam in student.exams">{{exam.course.courseName}} : {{exam.examTime | dateFormat}} <br> </span>
                        </td>
                    </tr>
                </table>

            </div>
            <div class="div_s">
            </div>
            <el-dialog title="考试详情" :visible.sync="dialogTableVisible">
                <el-table :data="examInfo">
                    <el-table-column prop="course.courseName" label="科目" width="150"></el-table-column>
                    <el-table-column label="分数" width="200">
                        <template slot-scope="scope">
                            <p>{{score}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="examPlace" label="地址"></el-table-column>
                </el-table>

            </el-dialog>

        </div>
        <div style="text-align:center">
            <el-button type="text" size="medium" @click.native="getMessage1">考试详情</el-button>
            <el-button type="text" size="medium" @click.native="printCard">打印下载</el-button>
        </div>
    </div>
</div>
<#include "/footer.ftl">
<script>
    let _this = new Vue({
        el: '#app',
        data: {
            student: '',
            examInfo: [],
            dialogTableVisible: false
        },
        created: function () {
            this.getExamMsg();
        },
        methods: {
            /*日期格式化*/
            dateFormat: function (row, column) {
                let val = row[column.property];
                //console.log(date);
                let date = new Date(val);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            },
            printCard() {
                // let bdhtml=$('#allPage').html();
                // let sprnstr="<!--startprint-->";
                // let eprnstr="<!--endprint-->";
                // let prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17);
                // prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
                window.document.body.innerHTML = window.document.getElementById('allPage').innerHTML;
                window.print();
                //window.print();
            },
            getExamMsg: function () {
                $.ajax({
                    type: 'post',
                    url: '/api/student/getStudentInfo',
                    data: {},
                    dataType: 'json',
                    success: function (res) {
                        console.log(res)
                        // this.examInfo = res.resData.exams;
                        this.student = res.resData;
                    },
                    error: function (error) {
                        console.log('接口不通' + error);
                    }
                })

            },
            getMessage1: function () {
                this.score = 100;
                this.dialogTableVisible = true;
                this.getExamMsg();
            }
        }
    })

</script>
</body>
</html>
